import React, { useEffect, useState } from 'react';
import { Button, Table, Card, Popconfirm } from 'antd'
import { listApi, delone, getOneById} from '../../../services/product';




// const dataSource=[{
//     id:1,
//     name:'大力丸',
//     price:15,
//     num:12

// },
// {
//     id:2,
//     name:'力丸',
//     price:15,
//     num:17

// },
// {
//     id:3,
//     name:'舒肤佳',
//     price:20,
//     num:20
// },
// ]

function List(props) {
    console.log(props);
    const [dataSource, setData] = useState([])



    useEffect(() => {
        listApi().then(res => {
            // console.log(res.data)
            setData(res.data)
        })
    }, [])
    const columns = [{
        title: "序号",
        key: "id",
        width: 100,
        align: "center",
        render: (txt, record, index) => index + 1
    },
    {
        title: "名字",
        dataIndex: "name"
    },
    {
        title: "价格",
        dataIndex: "price"
    },
    {
        title: "数量",
        dataIndex: "num"
    },
    {
        title: "操作",
        render: (txt, record, index) => {
            return <div>
                <Button style={{ margin: "0 20px" }} type="primary" size="small" onClick={()=>{
                    props.history.push(`/admin/product/Add/${record.id}`)
                }} >修改</Button>
                <Popconfirm title="是否删除" onCancel={() => console.log("取消删除")} onConfirm={() => delone(record.id).then(res => {
                    if (res.data = "success") {
                        let arr = dataSource
                        arr.splice(index, 1)
                        setData([...arr])
                    }
                })
                    //此处写接口

                }>
                    <Button type="danger" size="small">删除</Button>
                </Popconfirm>
            </div>
        },
        align: "center",
        width: 200
    },]
    return (
        <Card title="商品列表"
            extra={
                <Button type="primary" size="samll" onClick={() => props.history.push('/admin/product/Add')}
                >
                    新增
                </Button>
            }
        >
            <Table rowKey="id" columns={columns} bordered dataSource={dataSource} />
        </Card>
    )
}

export default List
